<template>
    <div class="video-container">
        <video-player ref="player" :options="options" @ended="onPlayerEnded()"></video-player>
    </div>
</template>

<script>
    export default {
        name: "air-video",
        data() {
            return {
                options: {
                    autoplay: true, // 是否自动播放
                    muted: false, // 是否静音
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器
                    preload: 'auto',
                    aspectRatio: "1232:275",
                    sources: [
                        {
                            src: 'config/video.mp4',
                            type: 'video/mp4'
                        }
                    ],
                    controlBar: {
                        timeDivider: false, // 是否显示当前时间和持续时间的分隔符
                        durationDisplay: false, // 是否显示持续时间
                        remainingTimeDisplay: false, // 是否显示剩余时间
                        progressControl: false, // 进度条
                        fullscreenToggle: false, // 全屏按钮
                        currentTimeDisplay: false, // 当前时间
                        volumeControl: false, // 声音控制键
                        playToggle: false // 暂停和播放键
                    }
                }
            }
        },
        methods: {
            onPlayerEnded() {
                 this.$router.push('/report/air');
            }
        },
        created() {
            // 获取屏幕大小，将屏幕大小设置为播放器比例，做到铺满的效果
            var vm = this;
            vm.options.aspectRatio = document.body.clientWidth + ':' + document.body.clientHeight;
            console.log("aspectRatio: " + vm.options.aspectRatio);
        }
    }
</script>

<style scoped>
</style>
